<template>
  <div class="">
    <el-row :gutter="15">
      <!-- 左边部分 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="10">
            <!-- 管理员信息 -->
            <el-card class="mgb20" style="height:340px">
              <div style="text-align: right">
                <el-button type="text" icon="el-icon-edit" @click="updateAdmin(adminInfo.userId)"/>
              </div>
              <div class="admin-info">
                <img :src="adminInfo.avatar" style="width: 120px;height: 120px;border-radius: 50%;"/>
                <div class="admin-info-cont">
                  <div class="admin-info-name">{{ adminInfo.username }}</div>
                  <el-tag>{{ adminInfo.roles[0].roleName }}</el-tag>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="admin-info-list">
                上次登录时间：
                <span>{{ adminInfo.loginTime }}</span>
              </div>
              <div class="admin-info-list">
                上次登录地点：
                <span>{{ adminInfo.location }}</span>
              </div>
              <div class="admin-info-list">
                上 次 登 录 IP：
                <span>{{ adminInfo.ip }}</span>
              </div>
            </el-card>
            <update-admin v-if="updateAdminVisible" ref="updateAdmin"/>
          </el-col>
          <el-col :span="14">
            <el-card>
              <div class="grid-content bg-purple">
                <!-- 用户登入报表 -->
                <div id="loginReport" style="width: 600px;height:300px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- Echarts表格 -->
        <el-card class="box-card" style="margin-top: 20px">
          <el-row :gutter="40" type="flex" class="panel-group" justify="space-around">
            <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('weeklyAllUserData')">
                <div class="card-panel-icon-wrapper icon-people">
                  <svg-icon icon-class="icon-peoples" class-name="card-panel-icon" name="peoples"/>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    注册用户
                  </div>
                  <count-to :start-val="0" :end-val=this.userTotal :duration="2000" class="card-panel-num"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('weeklyAllOrderData')">
                <div class="card-panel-icon-wrapper icon-shopping">
                  <svg-icon icon-class="shopping" class-name="card-panel-icon" name="shopping"/>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    总订单量
                  </div>
                  <count-to :start-val="0" :end-val="this.orderTotal" :duration="2000" class="card-panel-num"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('quarterlyAllMoneyData')">
                <div class="card-panel-icon-wrapper icon-money">
                  <svg-icon icon-class="icon-money" class-name="card-panel-icon" name="money"/>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    资金收益
                  </div>
                  <count-to :start-val="0" :end-val=this.moneyTotal :duration="3000" :decimals="2"
                            class="card-panel-num"/>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row style="background:#fff;padding:0 16px 0;">
            <line-chart :chart-data="lineChartData"/>
          </el-row>
        </el-card>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card style="min-height:650px;">
            <el-divider content-position="center">采购任务</el-divider>
            <!--<div class="radio" style="margin-bottom: 10px;margin-left: 38px">-->
            <!--  排序：-->
            <!--  <el-radio-group v-model="reverse">-->
            <!--    <el-radio :label="true">倒序</el-radio>-->
            <!--    <el-radio :label="false">正序</el-radio>-->
            <!--  </el-radio-group>-->
            <!--</div>-->
            <el-collapse>
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="task in purchaseTask"
                  :key="task.id"
                  :timestamp="task.createTime"
                  placement="top">
                  <el-card shadow="hover">
                    <el-tag v-if="task.status === 0">新建</el-tag>
                    <el-tag type="info" v-if="task.status === 1">已分配</el-tag>
                    <el-tag type="warning" v-if="task.status === 2">正在采购</el-tag>
                    <el-tag type="success" v-if="task.status === 3">已完成</el-tag>
                    <el-tag type="danger" v-if="task.status === 4">采购失败</el-tag>
                    <el-collapse-item :title="'优先级：' + task.priority">
                      <!--<p v-html="task.content"/>-->
                      <div v-for="name in task.skuNames" class="text item">
                        {{ name }}
                      </div>
                      <span>采购总金额：{{ task.amount }}</span>
                      <div style="text-align: right;">
                        <el-button :disabled="task.status === 2 || task.status === 3" type="text" icon="el-icon-bell" @click="receiveTask(task.id)">领取任务</el-button>
                        <el-button :disabled="task.status === 1 || task.status === 3" type="text" icon="el-icon-circle-check" @click="finishedTask(task)">完成采购</el-button>
                      </div>
                    </el-collapse-item>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-collapse>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import CountTo from 'vue-count-to'
import SvgIcon from '../../components/icon-svg/index'
import LineChart from '../../components/LineChart'
import UpdateAdmin from '../modules/sys/admin-add-or-update'

const lineChartData = {
  weeklyAllUserData: {
    xAbscissa: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    // redData: [0, 0, 0, 0, 0, 0, 0],
    blueData: [0, 0, 0, 0, 0, 0, 0],
    titles: ['', '']
  },
  weeklyAllOrderData: {
    xAbscissa: [],
    redData: [0, 0, 0, 0, 0, 0, 0],
    blueData: [0, 0, 0, 0, 0, 0, 0],
    titles: ['', '']
  },
  quarterlyAllMoneyData: {
    xAbscissa: [],
    // redData: [0, 0, 0, 0, 0, 0, 0],
    blueData: [0, 0, 0, 0, 0, 0, 0],
    titles: ['', '']
  }
}
export default {
  components: {
    SvgIcon,
    CountTo,
    LineChart,
    UpdateAdmin
  },
  data() {
    return {
      // 公告通知排序
      reverse: true,
      // 需要设置默认值，不然加载无法完成
      lineChartData: lineChartData.weeklyAllUserData,
      // 注册用户总数
      userTotal: 0,
      // 订单总数
      orderTotal: 0,
      // 总资金流动
      moneyTotal: 0,
      dataLoading: false,
      // 采购任务列表
      purchaseTask: [],
      // 是否弹出管理员编辑框
      updateAdminVisible: false,
    }
  },
  computed: {
    adminInfo: {
      get() {
        return this.$store.state.user.admin
      },
    },
    departmentList: {
      get () {
        return this.$store.state.department.department
      }
    },
  },
  mounted() {
    this.initChart();
  },
  created() {
    this.getMemberRegisterData();
    this.getOrderData();
    this.getPurchaseTasks();
  },
  methods: {
    // 图标点击触发事件
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    // 获取用户数据
    getMemberRegisterData() {
      this.$http({
        url: this.$http.adornUrl('/member/getWeeklyRegisterData'),
        method: 'get',
      }).then(({data}) => {
        this.userTotal = data.data.userTotal[0]
        this.lineChartData = data.data
        this.$set(lineChartData, 'weeklyAllUserData', data.data)
      })
    },
    // 获取订单量数据
    getOrderData() {
      this.$http({
        url: this.$http.adornUrl('/order/getWeeklyData'),
        method: 'get',
      }).then(({data}) => {
        this.orderTotal = data.res.orderTotal[0]
        this.lineChartData = data.res
        this.$set(lineChartData, 'weeklyAllOrderData', data.res)
      })
    },
    // 绘图
    initChart() {
      // 获取所有季度收益数据
      this.$http({
        url: this.$http.adornUrl('/order/getQuarterlyEarning'),
        method: 'get',
      }).then(({data}) => {
        this.moneyTotal = data.res.moneyTotal[0]
        this.lineChartData = data.res
        this.$set(lineChartData, 'quarterlyAllMoneyData', data.res)
        this.myChart = echarts.init(document.getElementById('loginReport'), 'macarons')
        this.myChart.setOption({
          title: {
            show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '总收益', //主标题文本，'\n'指定换行
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: '10',
            // 数据分类
            data: data.res.xAbscissa
          },
          series: [
            {
              name: '总收入（元）',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: data.res.quarterlyEarning,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
      })
    },
    // 加载采购任务
    getPurchaseTasks() {
      this.$http({
        url: this.$http.adornUrl("/ware/purchase/list"),
        method: "get",
        params: this.$http.adornParams({
          "adminId": this.adminInfo.userId
        })
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.purchaseTask = data.data;
        } else {
          this.purchaseTask = [];
        }
      });
    },
    // 领取采购任务
    receiveTask(id) {
      let ids = [id];
      this.$http({
        url: this.$http.adornUrl("/ware/purchase/receive"),
        method: "post",
        data: this.$http.adornData(ids)
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.$message({
            message: "接受任务",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getPurchaseTasks();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 完成采购任务
    finishedTask(task) {
      this.$http({
        url: this.$http.adornUrl("/ware/purchase/finished"),
        method: "post",
        data: this.$http.adornData({
          id: task.id,
          status: task.status
        })
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getPurchaseTasks();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 更新管理员
    updateAdmin(id) {
      this.updateAdminVisible = true
      this.$nextTick(() => {
        // 为子组件addOrUpdate传递部门数据
        this.$refs.updateAdmin.departmentDataTree = this.departmentList
        this.$refs.updateAdmin.dataFromAdmin = this.adminInfo
        this.$refs.updateAdmin.init(id)
      })
    }
  },
}
</script>


<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.mod-home {
  /*line-height: 1.5;*/
}

.admin-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  //border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.admin-info-cont {
  padding-left: 90px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.admin-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.admin-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.admin-info-list span {
  margin-left: 70px;
}

.el-collapse-item__header {
  font-weight: 900;
}

.el-card__body {
  padding: 20px;
}

.el-collapse {
  border-top: 0;
  border-bottom: 0;
}

</style>

